@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline" style="margin-right: 0px;">
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" class="layui-input" placeholder="开始时间" name="start_time" id="start_time" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-mid layui-word-aux" style="display: inline;margin-right: 5px">-</div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="结束时间" name="end_time" id="end_time" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="shipping_no" id="shipping_no" placeholder="请输入运单编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="status" lay-verify="required" id="status">
                            <option value="">请选择状态</option>
                            @foreach($status as $k => $v)
                            <option value="{{$k}}">{{$v}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="searchBtn">搜 索</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>

            <script type="text/html" id="options">
                <div class="layui-btn-group"></div>
            </script>

        </div>
    </div>
@endsection

@section('script')
    @can('freight.order')
        <script>
            layui.use(['layer', 'table', 'form', 'laydate'], function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                var laydate = layui.laydate;
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    , height: 500
                    , url: "{{ route('admin.pay.data') }}" //数据接口
                    , page: true //开启分页
                    , cols: [[ //表头
                        {checkbox: true, fixed: true}
                        , {field: 'shipping_no', title: '运单号', width: 160, fixed: 'left'}
                        , {field: 'load_num', title: '实际载货量', width: 150}
                        , {field: 'load_amount', title: '应付总金额(元)', width: 150}
                        , {field: 'loss_amount', title: '扣损金额(元)', width: 150}
                        , {field: 'actual_amount', title: '实际支付金额(元)', width: 150}
                        , {field: 'status_desc', title: '运费支付状态', width: 150}
                        , {field: 'bank_card_no', title: '银行卡号', width: 150}
                        , {field: 'bank_branch', title: '开户行',  width: 150}
                        , {field: 'created_at', title: '创建时间', width: 180}
                        , {field: 'updated_at', title: '更新时间', width: 180}
//                        , {fixed: 'right', align: 'center', toolbar: '#options', width: 100}
                    ]]
                });

                //搜索
                laydate.render({
                    elem: "#start_time",
                    trigger: 'click',
                });
                laydate.render({
                    elem: "#end_time",
                    trigger: 'click',
                });
                $("#searchBtn").click(function () {
                    var start_time = $("#start_time").val();
                    var end_time = $("#end_time").val();
                    var shipping_no = $("#shipping_no").val();
                    var status = $("#status").val();
                    dataTable.reload({
                        where: {start_time: start_time, end_time: end_time, shipping_no: shipping_no, status:status},
                        page: {curr: 1}
                    })
                })
            })
        </script>
    @endcan
@endsection